<template>
	<view class="bcontainer">
		<view class="bookstyle" @tap="gotoCollect()">
			<view class="books">
				<image src="../../static/icon/collect.png" mode="" class="aicon"></image>
				<view class="bo">我的书架</view>
			</view>
		</view>
		<view class="bookstyle" @tap="gotoCreation()">
			<view class="books">
				<image src="../../static/icon/create.png" mode="" class="aicon"></image>
				<view class="bo">我的创作</view>
			</view>
		</view>
		<view class="bookstyle" @tap="gotoIndex()">
			<view class="books">
				<image src="../../static/icon/detail.png" mode="" class="aicon"></image>
				<view class="bo">编辑资料</view>
			</view>
		</view>
		<view class="bookstyle" @tap="gotoAvatar()">
			<view class="books">
				<image src="../../static/icon/avatar.png" mode="" class="aicon"></image>
				<view class="bo">修改头像</view>
			</view>
		</view>
		<view class="bookstyle" @tap="gotoPsw()">
			<view class="books">
				<image src="../../static/icon/lock.png" mode="" class="aicon"></image>
				<view class="bo">修改密码</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Myframe",
		data() {
			return {
				gotoCollect(){
					uni.switchTab({
						url:'/pages/index/bookshelf'
					})
				},
				gotoCreation(){
					uni.navigateTo({
						url:'/pages/views/Mycreation'
					})
				},
				gotoIndex(){
					uni.navigateTo({
						url:'/pages/views/Mydetail'
					})
				},
				gotoAvatar(){
					uni.navigateTo({
						url:'/pages/views/Myavatar'
					})
				},
				gotoPsw(){
					uni.navigateTo({
						url:'/pages/views/Password'
					})
				}
			};
		}
	}
</script>

<style scoped>
	.bcontainer{
		width: 750rpx;
		height: 360rpx;
		border-radius: 30rpx 30rpx 0 0; 
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: beige;
	}
	.bookstyle{
		width: 180rpx;
		height: 180rpx;
		border-radius: 30rpx;
		text-align: center;
		background-color: cornsilk;
		display: flex;
	}
	.books{
		width: 180rpx;
		height: 60rpx;
		margin: 10rpx 0;
		flex-direction: column;
	}
	.bo{
		color: darkgoldenrod;
		width: 180rpx;
		height: 60rpx;
		margin: 20rpx 0;
		font-size: 36rpx;
	}
	.aicon{
		width: 60rpx;
		height: 60rpx;
	}
</style>